import React, { useEffect, useState } from 'react'
import { NavBar, Card, Tag, List, IndexBar, Space, Toast } from 'antd-mobile'
import { useParams, useNavigate } from 'react-router-dom'
import axios from 'axios';

function Index() {

  const { type } = useParams()
  console.log(type);
  const navigate = useNavigate()
  const [list, setlist] = useState([])
  const [data, setdata] = useState([])
  const [data1, setdata1] = useState([])

  const getdata = async () => {
    const res = await axios.get('/xx/city')
    const resp = await axios.get('/xx/city/location', {
      params: {
        key: '6cf17daed966fbd57cb6db4949db4c43'
      }
    })
    console.log(res);
    console.log(resp);

    setlist(res.data.data.cityList)
    setdata(res.data.data.hotCities)
    setdata1(resp.data.data.city)


  }
  useEffect(() => {
    getdata()
  }, [])

  return (
    <div>
      <NavBar
        style={{
          '--height': '50px',
          '--border-bottom': '1px #eee solid',
        }}

        onBack={() => navigate('/')}
      >
        城市选择
      </NavBar>
      <div>

        <Card title='当前城市' >
          {data1}
        </Card>
        <Card title='热门城市'>
          {
            data.map((item, index) => {
              return <Tag style={{ margin: 5 }} key={index}>{item.name}</Tag>
            })
          }
          {/*  */}
        </Card>

      </div>
      <div style={{ height: window.innerHeight }}>
        <IndexBar>
          {list.map(group => {
            const { title, items } = group
            return (
              <IndexBar.Panel
                index={title}
                title={`${title}`}
                key={`${title}`}
              >
                <List>
                  {items.map((item, index) => (
                    <List.Item key={index}>{item.name}</List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            )
          })}
        </IndexBar>
      </div>
    </div>
  )
}

export default Index
